<template>
  <el-dialog :visible.sync="detailsVisible" @close="hideDetail" class="dialog_details" width='654px'>
    <div slot="title" class="dialog-title">{{detailsType==1?'简历详情':'简历审核'}}</div>
    <el-card v-if="details" class="addresumeform el-card-border">
      <el-form :label-position="labelPosition" label-width="110px">
        <el-form-item label="账号：">
          <div class="flex_box">
            <span class="detail_info flex1">{{details.user_info.mobile}}</span>
          </div>
        </el-form-item>
        <el-form-item label="姓名：">
          <div class="flex_box">
            <span class="detail_info flex1">{{details.user_info.full_name}}</span>
          </div>
        </el-form-item>
        <el-form-item label="年龄：">
          <div class="flex_box">
            <span class="detail_info flex1">{{details.user_info.age}}</span>
            <span class="suffix">岁</span>
          </div>
        </el-form-item>
        <el-form-item label="职位类型：">
          <div class="flex_box">
            <span class="detail_info flex1">{{details.diy_post_type || getAttrValue(details.value_list,'POST_TYPE')}}</span>
          </div>
        </el-form-item>
        <el-form-item label="工作类型：" v-if="getAttrValue(details.value_list,'WORK_TYPE')">
          <span class="detail_info">{{getAttrValue(details.value_list,'WORK_TYPE')}}</span>
        </el-form-item>
        <div v-if="details.user_info.type==1">
          <el-form-item label="性别：">
            <span class="detail_info">{{details.user_info.sex==1?'男':details.user_info.sex==2?'女':'保密'}}</span>
          </el-form-item>
          <el-form-item label='驾驶证号：'>
            <div class="flex_box">
              <span class="detail_info flex1">{{details.user_info.drive_number}}</span>
            </div>
          </el-form-item>
          <el-form-item label='准驾车型：'>
            <span class="detail_info">{{getDrivingModel(details.user_info.driving_model)}}</span>
          </el-form-item>
          <el-form-item label='驾龄：'>
            <div class="flex_box">
              <span class="detail_info flex1">{{details.user_info.driving}}</span>
              <span class="suffix">年</span>
            </div>
          </el-form-item>
          <el-form-item label='有效起始日期：'>
            <span class="detail_info">{{returnDate(details.user_info,'start_date')}}</span>
          </el-form-item>
          <el-form-item label='有效截止日期：'>
            <span class="detail_info">{{returnDate(details.user_info,'end_date')}}</span>
          </el-form-item>
        </div>
        <el-form-item label="工作经验：" v-if="getAttrValue(details.value_list,'WORK_EXP')">
          <span class="detail_info">{{getAttrValue(details.value_list,'WORK_EXP')}}</span>
        </el-form-item>
        <el-form-item label="期望工作地区：">
          <span class="detail_info">{{details.province_name}}</span>
          <span class="detail_info">{{details.city_name}}</span>
          <span class="detail_info">{{details.district_name}}</span>
        </el-form-item>
        <el-form-item label="期望薪资：">
          <span class="detail_info">{{getSalary(details)}}</span>
        </el-form-item>
        <el-divider v-if="isImg()"></el-divider>
        <div class="upimg_title" v-if="isImg()"><p class="theme_btn">其他证件</p></div>
        <el-form-item label="驾驶证：" v-if="details.user_info.deive_home_img || details.user_info.deive_side_img">
          <div class="flex_box_between">
            <div class="photo_box">
              <p class="img" :style="'background-image:url('+getImg(details.user_info.deive_home_img)+')'"></p>
            </div>
            <div class="photo_box">
              <p class="img" :style="'background-image:url('+getImg(details.user_info.deive_side_img)+')'"></p>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="其他资格证：" v-if="details.user_info.qua_home_img || details.user_info.qua_side_img">
          <div class="flex_box_between">
            <div class="photo_box">
              <p class="img" :style="'background-image:url('+getImg(details.user_info.qua_home_img)+')'"></p>
            </div>
            <div class="photo_box">
              <p class="img" :style="'background-image:url('+getImg(details.user_info.qua_side_img)+')'"></p>
            </div>
          </div>
        </el-form-item>
        <el-divider></el-divider>
        <div v-if="detailsType==1">
          <el-form-item label="审核操作：">
            <span class="detail_info">{{details.status==0?'审核中':details.status==1?'已通过':'已拒绝'}}</span>
          </el-form-item>
          <el-form-item label="驳回原因：" v-if="details.status==2">
            <span class="detail_info">{{details.remoke}}</span>
          </el-form-item>
          <el-row class="info" v-if="details.status==2">
            <el-col :span="4">驳回原因：</el-col><el-col :span="20">{{details.remoke}}</el-col>
          </el-row>
        </div>
      </el-form>
      <el-form v-if="detailsType!=1" :model="detailsFormFieldsData" label-width='100px' :label-position="labelPosition">
        <el-form-item label="审核操作：" prop="name">
          <el-select v-model="detailsFormFieldsData.status" placeholder="请选择准驾车型" style="width:100%">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="驳回原因：" prop="name" v-if="detailsFormFieldsData.status==2">
          <el-input type="textarea" v-model="detailsFormFieldsData.remake" style="width: 100%"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <div slot="footer" class="dialog-footer" v-if="detailsType==1">
      <el-button @click="hideDetail" size='medium'>关 闭</el-button>
    </div>
    <div slot="footer" class="dialog-footer" v-else>
      <el-button @click="hideDetail" size='medium'>取 消</el-button>
      <el-button type="primary" @click="examineSubmit" size='medium'>确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      url:'/profession/admin/resume/',
      details:'',//详情数据
      detailsVisible:false,
      detailsFormFieldsData:{
        id:'',
        status:'0',
        remake:''
      },
      detailsType:'',// 详情弹框是否审核，1 详情 2 审核
      statusList:[
        {label:'待审核',value:'0'},
        {label:'审核通过',value:'1'},
        {label:'审核驳回',value:'2'}
      ]
    }
  },
  mounted() {
    this.baseUrl = process.env.VUE_APP_BASE_API
  },
  methods: {
    getList(){},
    show(item,type) {
      this.detailsType = type
      this.$http.get(this.url+item.id).then(response => {
        this.details = response.data.data || response.data
      })
      this.detailsFormFieldsData.id = item.id
      this.detailsVisible  = true
    },
    // 隐藏简历详情dialog
    hideDetail() {
      this.detailsVisible = false
    },
    // 审核
    examineSubmit() {
      if (this.detailsFormFieldsData.status == 0) return
      this.$emit('resumeUpdate',this.detailsFormFieldsData,'status')
    },
    // 驾驶证有效日期
    returnDate(val,key) {
      if (!val) return ''
      val = JSON.parse(val.deive_json)
      return val[key]
    },
    // 驾驶证和资格证是否都没有
    isImg() {
      let info = this.details.user_info
      return info.deive_home_img || info.deive_side_img || info.qua_home_img || info.qua_side_img
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '~@/styles/element-variables.scss';
  .info{
    line-height: 30px;
  }
  .img_box{
    text-align: center;
  }
  .img_box img{
    display:block;
    margin:0 auto 10px;
    width: 150px;
  }
  .detail_info{
    height: 34px;
    line-height: 34px;
    display: inline-block;
    padding: 0 10px;
    background: #FAFAFC;
    border: 1px solid #eee;
    color: #8D92A1;
    margin-right: 10px;
  }
  .upimg_title{
    border-bottom: 1px solid #eee;
    font-size: 14px;
    margin-bottom:40px;
    .theme_btn{
      width: 140px;
      height: 36px;
      line-height: 36px;
      background:$--color-primary;
      color:#fff;
      text-align: center;
    }
  }
  .suffix{
    font-size:14px;
    color:#61687C;
  }
</style>